<template>
	<view>
		<view class="posire">
			<view class="con">
				<view @click="navto('mingxi')" class="height80 width92vw size26 flex-a-i pl30 posiab bottom0 zindex5" style="background: rgba(255, 255, 255, 0.6);border-top-right-radius: 21rpx;border-top-left-radius: 21rpx;">
					兑换记录
					<image mode="widthFix" src="/static/shoppimg/duihuan.png" class="width15 mt5 ml5 flex image"></image>
				</view>
			</view>
			
			<image mode="widthFix" class="image" src="/static/shoppimg/bghome.png"></image>
		</view>
		<view class="con">
			<back></back>
			<view class="flex-ju-b mt-70">
				<view class="size28 pl30">我的当前积分</view>
				<view class="flex-a-i size48 bold">
					<image mode="widthFix" src="/static/shoppimg/jinbi.png" class="width24 image mr5 mt15"></image>
					{{integral}}</view>
			</view>
			<view class="bg3C3C3C ra20 height80 mb30">
				<view class="flex-ju-b height80  color999 size26  mt30">
					<view @click="tabim(0)" :class="{active:tindex==0}" class=" flex-ju-c ra20 width340 ml5 height69">积分兑换商品</view>
					<view @click="tabim(1)" :class="{active:tindex==1}" class="flex-ju-c ra20 mr5 width340 height69">藏品兑换积分</view>
				</view>
			</view>
			<view v-if="isdata" class="flex-ju-c mt8vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			<view class="flex-ju-b flex-wrap">
				<view v-for="(item,index) in integrallist" :key="index"  @click="todetial(item)" class="mb30 bgfff ra20" style="flex:0 0 48%;">
					<image  :src="item.thumb" class="image ra20 height330"></image>
					<view class="one size26 bold ml15 mt10">{{item.title}}</view>
					<view class="size24 color0C1012 ml15">库存{{item.stock}}件</view>
					
					<view class="flex-ju-b mb20 mt20">
						<view v-if="item.stock>0" class="size23 ml15">有货</view>
						<view v-else class="size23 color999 ml15">无货</view>
						<template v-if="item.stock>0">
							<view v-if="tindex==0">
								<text class="size35 bold">
								{{item.integral}}</text>
								<text class="size23 mr15 ml3">积分</text>
							</view>
							<view v-else class="size23 mr15">
								可兑换{{item.integral}}积分
							</view>
						</template>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				isdata:false,
				tindex:0,
				theme: uni.getStorageSync('theme'),
				integral:"",
				integrallist:[]
			}
		},
		onLoad() {
			this.ilist()
		},
		onShow() {
			this.http('user/Integral').then(res=>{
				this.integral = res.data.Integral
			})
		},
		methods: {
			todetial(item){
				if(this.tindex==0){
					this.navto('detail?uuid='+item.uuid+'&type='+this.tindex+'&img='+item.content)
				}else{
					this.navto('boxdetail?uuid='+item.uuid+'&type='+this.tindex+'&img='+item.content)
				}
			},
			ilist(){
				this.http('integralExchangeSetting').then(res=>{
					this.integrallist = res.data.list
					if(this.integrallist.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
				})
			},
			tabim(index){
				this.tindex=index
				if(index){
					this.http('exchangeIntegralSetting').then(res=>{
						this.integrallist = res.data.list
						if(this.integrallist.length){
							this.isdata = false
						}else{
							this.isdata = true
						}
					})
				}else{
					this.ilist()
				}
			}
		}
	}
</script>


<style>
	page{
		background: #F6F7F8;
	}
.active{
	color:#BBFF8C;
	background: #000;
}
</style>
